@import 'commons.less';

@hineColor: #e8e8e8;
@titleBackColor: white;
@backColor: white;

.tui-dialog-mask:extend(.tui-mask) {
	background-color:#888;
	.opacity(0.5);
	z-index:@dialogLayer;
}
tui\:dialog {
	@captionHeight: 40px;

	outline:none;
	display:none;
	position:fixed;
	background-color:white;

	.tui-content {
		box-sizing: content-box;
	}

	.border-radius(@dialogBorderRadius);
	.shadow(0px, 1px, 30px, rgba(0,0,0,0.5));
	z-index:@dialogLayer;
	text-align:left;
	> div {
		padding:10px 20px;
		background-color:@backColor;
		overflow:auto;
	}
	> .tui-title-bar {
		.top-radius(@dialogBorderRadius);

		overflow:hidden;
		padding:5px 20px;
		padding-right: 50px;
		font-weight: bold;
		font-size: 18px;
		background-color: @titleBackColor;
		height:@captionHeight;
		line-height:@captionHeight;
		cursor: default;
		.tui-close {
			position:absolute;
			top:10px;
			right:10px;
			width:30px;
			height:30px;
			line-height:30px;
			text-align:center;
			padding:0;
			background-color:transparent;
			border:0;
			cursor:pointer;
			outline:none;
			color: #777;
			.border-radius(@buttonBorderRadius);
			&:hover {
				background-color:(@panelColor - #111);
			}
			&:before {
				//.icon-base();
				//.fa-times();
				display: inline-block;
				font-style: normal;
				font-weight: 400;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				font-family: Arial,Helvetica,sans-serif;
				font-size: 30px;
				content: "\00d7";
			}
		}
		>.tui-text {
			display: block;
			max-width: 500px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			color: #aaa;
			font-weight: normal;
		}
	}
	> .tui-button-bar {
		.bottom-radius(@dialogBorderRadius);
		overflow:hidden;
		padding:10px 10px;
		//border-top:1px solid @hineColor;
		background-color:@titleBackColor;
		text-align:right;
		white-space:nowrap;
		tui\:button {
			margin:2px 4px;
			min-width: 40px;
			padding-left: 14px;
			padding-right: 14px;
			display: inline-block;
		}
	}

}



tui\:dialog .tui-title-bar {
	span.tui-text i {
		.icon-base();
		font-size:22px;
		vertical-align: baseline;
		text-align: center;
		margin-right: 15px;
		line-height: 22px;
		width: 24px;
	}
	.tui-dialog-title-warning:before {
		.fa-warning();
		color:@iconWarnColor;
	}
	.tui-dialog-title-ok:before {
		.fa-check-circle();
		color:@iconSuccessColor;
	}
	.tui-dialog-title-info:before {
		.fa-info-circle();
		//.fa-lightbulb-o();
		color:@iconInfoColor;
	}
	.tui-dialog-title-error:before {
		//.fa-exclamation-circle();
		.fa-times-circle();
		color:red;
	}
	span.tui-text i.tui-dialog-title-ask {
		display: none;
	}
	.tui-dialog-title-ask:before {
		// .fa-question-circle();
		// color:@iconInfoColor;
		display: none;
	}
}

.tui-msg-container {
	padding:5px 20px;
	min-width: 260px;
	max-width: 500px;
	text-align: center;
	> div {
		display: inline-block;
		text-align: left;
		white-space: pre-wrap;
	}
}

tui\:dialog.tui-wait-box {
	.tui-msg-container {
		.tui-content {
			max-width: 250px;
		}
	}
	.tui-msg-container>div {
		padding:10px;
		color: #424242;
	}
	.tui-msg-container>span {
		padding: 10px;
		display: block;
		height: 40px;
		line-height: 40px;
		text-align: center;
		&:before {
			//.fa-gear();
			// .icon-base();
			// .fa-circle-o-notch();
			content: " ";
			display: inline-block;
			height: 40px;
			width: 30px;
			background-repeat: no-repeat;
			background-position: center;
			background-image: url();
			.tui-spin();
			// font-size:24px;
			// color: #017bce;
		}
	}
}

tui\:dialog.tui-wait-box-simple {
	background-color: #0008;
	border-radius: 8px;
	overflow: hidden;
	.tui-content {
		background-color: transparent;
		box-sizing: border-box;
		min-width: 0 !important;
		min-height: 0 !important;
		width: 70px !important;
		height: 70px !important;
		padding: 0;
		overflow: hidden;
		.tui-msg-container {
			padding: 0px !important;
			display: block;
			height: 70px;
			width: 70px;
			text-align: center;
			&>span {
				padding: 0px !important;
				display: flex;
				height: 70px;
				width: 70px;
				justify-content: center;
				align-items: center;
				&:before {
					content: " ";
					display: inline-block;
					height: 30px;
					width: 30px;
					background-repeat: no-repeat;
					background-position: center;
					background-image: url();
					.tui-spin();
					// font-size:24px;
					// color: #017bce;
				}
			}
		}
	}
}

@media (max-width: 580px) {
	tui\:dialog.tui-dialog-mobile-model {
		transition: top 0.2s;
	}

	tui\:dialog.tui-dialog-mobile-model >div.tui-content {
		padding:0 20px;
	}
	tui\:dialog.tui-dialog-mobile-model >.tui-button-bar {
		border-top: 1px solid #ddd;
		display: flex !important;
		flex-direction: row;
		tui\:button {
			flex-grow: 1;
		}
	}
}

@media (max-width: 380px) {
	.tui-msg-container {
		min-width: 0px;
		max-width: 90%;
	}
	tui\:dialog.tui-wait-box-simple .tui-msg-container {
		max-width: none;
	}
}

tui\:dialog.tui-wait-box {
	.tui-msg-container {
		min-width: 150px;
	}
}
